import React, {Component} from 'react';
import {
	AppRegistry,
	Dimensions,
	Platform,
	NativeModules,
	DeviceInfo,
	StyleSheet,
	Image,
	Text,
	View,
	TextInput,
	PixelRatio,
	TouchableOpacity,
	ScrollView,
	FlatList,
	ActivityIndicator
} from 'react-native';

import moment from 'moment';

var Common = require('./common');
var num = 1;
var totalPages = 1;
const pixelRatio = PixelRatio.get();
const dismissKeyboard = require('dismissKeyboard');
export default class MessageList extends Component<Props> {
	static navigationOptions = {
		headerTitle: '消息通知',
		tabBarLabel: '消息通知',
	};

	constructor(props) {
		super(props);
		this.state = {
			news: [],
			refreshing: false,//下拉刷新
			hasMore: true,//是否有更多数据
			endText: '加载更多...',
		};
	}

	login() {
		var _this = this;
		Common.ajaxPost(Common.url + 'login.php', function (res) {
			if (res.code == "0000") {

			}
		}.bind(this), {verify: '08login', t: ''});
	}

	toRegister() {
		this.props.navigation.navigate('Register')
	}

	toDetail() {
		this.props.navigation.navigate('MessageDetail')
	}

	getData() {
		var _this = this;

		this.setState({
			refreshing: true,
			hasMore: true,
		})

		if(totalPages >= num){
			Common.ajaxPost(Common.url + 'thinksns/index.php?app=public&mod=Index&act=messageContent&is_ajax=1&p=' + num, function (res) {
				console.log(res)
				if (res.status == 1) {
					var data = res.data;
					totalPages = data.list.totalPages;
					if (data.list && data.list.data && data.list.data.length) {
						this.setState({
							news: this.state.news.concat(data.list.data),
							refreshing: false,
							hasMore: true,
						})

					} else {
						this.setState({
							hasMore: false,
							refreshing: false,
						})
						console.log('hasMore', this.state.hasMore);
					}
				}
			}.bind(this), {verify: '08login', t: '', type: 'notify'}, this.props);
		}
		else{
			this.setState({
				hasMore: false,
				refreshing: false,
			})
		}
	}

	componentDidMount() {
		num = 1;
		totalPages = 1;
		this.getData();
	}

	renderNews(data) {
		console.log('renderNews', data);
		var _this = this;
		if (data && data.item) {
			return (
				<TouchableOpacity key={'item' + data.index} style={styles.newsItem}>
					<View style={{flex: 1}}>
						<Text style={styles.newsTitle}>系统消息</Text>
						<View style={styles.newsTips}>
							<Text style={styles.newsTipsText}>{data.item.body}</Text>
							<Text style={styles.newsTipsText}>{moment(parseInt(data.item.ctime) * 1000).format('YYYY-MM-DD HH:mm:ss')}</Text>
						</View>
					</View>
				</TouchableOpacity>
			);
		} else {
			return (
				<Text>空</Text>
			)
		}
	}

	keyExtractor = (item, index) => index + '';//生成key
	refresh() {
		num = 1;
		totalPages = 1;
		this.setState({
			refreshing: true
		})
		this.getData();
	}

	loadMore() {
		console.log('loadMore');
		num++;

		console.log('hasMore', this.state.hasMore);
		if (this.state.hasMore) {
			this.getData();
		}
		else{
			this.setState({
				endText: '无更多数据'
			})
		}
	}

	renderFooter() {
		console.log('renderFooter');
		if(this.state.refreshing){
			return (
				<View style={{padding: 20}}>
					<ActivityIndicator/>
					<Text style={{textAlign: 'center'}}>{this.state.endText}</Text>
				</View>
			)
		}
		else{
			return (
				<View></View>
			)
		}
	}

	render() {
		const {navigate} = this.props.navigation;
		return (
			<View style={styles.container}>
				<FlatList
					ListFooterComponent={this.renderFooter.bind(this)}
					renderItem={this.renderNews.bind(this)}
					data={this.state.news}
					onEndReachedThreshold={0.2}
					onEndReached={this.loadMore.bind(this)}
					onRefresh={this.refresh.bind(this)}
					refreshing={this.state.refreshing}
					keyExtractor={this.keyExtractor.bind(this)}
					style={{height: Common.screenHeight - 150}}
				/>

			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		height: Common.screenHeight,
		backgroundColor: '#fff',
	},
	logo: {
		height: 45,
		width: Common.screenWidth,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: '#3c78ff'
	},
	fakeInput: {
		width: Common.screenWidth * 0.7,
		height: 25,
		backgroundColor: '#86abfd',
		borderRadius: 12,
		flexDirection: 'row',
		alignItems: 'center',
	},
	tabs: {
		flexDirection: 'row',
		alignItems: 'flex-end',
		justifyContent: 'center',
		paddingTop: 25,
		marginLeft: 20,
		marginRight: 20,
		borderBottomColor: '#e9e9e9',
		borderBottomWidth: 1,
	},
	tabsItem: {
		flexDirection: 'column',
		justifyContent: 'center',
		alignItems: 'center',
		paddingLeft: 15,
		paddingRight: 15,
	},
	line: {
		width: 16,
		height: 3,
		marginTop: 3,
	},
	newsItem: {
		flexDirection: 'row',
		justifyContent: 'center',
		marginLeft: 20,
		marginRight: 20,
		paddingTop: 10,
		paddingBottom: 10,
		borderBottomColor: '#e9e9e9',
		borderBottomWidth: 1,
	},
	newsTitle: {
		fontSize: 16,
		lineHeight: 20,
		// height:40,
	},
	newsTips: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		paddingTop: 10,
	},
	newsTipsMark: {
		marginRight: 10,
		backgroundColor: '#f5f7fa',
		padding: 3,
		color: '#a8a8a8'
	},
	newsTipsText: {
		color: '#a8a8a8'
	},

});
